<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <title>
        ESP-AP Setting
    </title>
    <link id="dynamic-favicon" rel="icon" type="image/x-icon">
</head>
<body>
<h1>ESP-AP Setting</h1>
<!--获取WIFI列表-->
<button onclick="fetchData()">Get WI-FI List</button>
<!--设置WIFI-->
<br>
<label for="wifi"></label><select id="wifi" name="wifi" style="width: 140px; height: 20px">
    <option selected>SSID</option>
</select>
<label>
    <input id="password" name="password" placeholder="password" type="text">
</label>
<br>
<label for="restart"><input id="restart" name="restartDev" type="checkbox">restart device</label>
<br>
<button onclick="pSSIDAndPassword()">Set Chooses WIFI</button>
<br>
<label for="restDev"><button id="restDev" onclick="resetDev()">Resting Device</button></label>
<script>
    var wifi = document.getElementById("wifi");
    // 自动执行
    window.onload = function () {
        // 创建WIFI列表数组
        // var wifiList = [""];
        // if (wifiList.length !== 0) {
        //     for (var i = 0; i < wifiList.length; i++) {
        //         addOption(wifiList[i], wifiList[i]);
        //     }
        // }

        // 设置图标
        // getFavicon();

    };

    // 添加节点
    function addOption(text, value) {
        var option = document.createElement("option");
        option.text = text;
        option.value = value;
        // 添加到select前面
        wifi.insertBefore(option, wifi.firstChild);
    }

    function pSSIDAndPassword() {
        const ssid = document.getElementById('wifi').value;
        const password = document.getElementById('password').value;

        // 判断reset是否被选中
        let isRestart_flag = document.getElementById('restart').checked;

        fetch('http://192.168.4.1/setWifi', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ ssid: ssid, passwd: password, isRestart: isRestart_flag })
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                console.log('Success:', data);
                // 处理成功响应
            })
            .catch(error => {
                console.error('There was a problem with the fetch operation:', error);
                // 处理错误响应
            });
    }

    function fetchData() {
        fetch('http://192.168.4.1/wifiList')
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                // 获取 select 元素
                const select = document.getElementById('wifi');
                // 清空 select 元素
                select.innerHTML = '<option value="">Select an option</option>';

                data.numbers.forEach(wifiName => {
                    const option = document.createElement('option');
                    option.value = wifiName;
                    option.textContent = wifiName;
                    select.insertBefore(option, wifi.firstChild);
                });
            })
            .catch(error => {
                console.error('There was a problem with the fetch operation:', error);
            })
    }

    function resetDev() {
        fetch('http://192.168.4.1/resetDev', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ flag: true, })
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                console.log('Success:', data);
                // 处理成功响应
            })
            .catch(error => {
                console.error('There was a problem with the fetch operation:', error);
                // 处理错误响应
            });
    }

    // // 获取图标
    // function getFavicon() {
    //     // 使用Axios获取favicon图标
    //     axios.get('http://192.168.4.1/favicon.ico', { responseType: 'blob' })
    //         .then(response => {
    //             const url = URL.createObjectURL(response.data);
    //             const link = document.getElementById('dynamic-favicon');
    //             link.href = url;
    //         })
    //         .catch(error => {
    //             console.error('Error fetching the favicon:', error);
    //         });
    // }

</script>
</body>
</html>